<template>
    <el-cascader
      :placeholder= 'placeholder'
      :options="options"
      :filterable = 'filterable'
      :disabled = "disabled"
      :value ="value"
      :expand-trigger = "expandTrigger"
      :size = "size"
      :show-all-levels = 'showAllLevels'
      @active-item-change = '$emit("active-item-change")'
      @change="updateValue"
    ></el-cascader>
</template>
<script>
import address from './address.json'
export default {
  props: {
    format: Boolean,
    showAllLevels: {
      type: Boolean,
      default: true
    },
    expandTrigger: String,
    value: [String, Array],
    size: String,
    disabled: Boolean,
    filterable: Boolean,
    placeholder: String
  },
  data () {
    return {
      options: address
    }
  },
  computed: {
    formatValue: {
      get () {
        return this.value.split('-')
      }
    }
  },
  methods: {
    updateValue (item) {
      if (this.format) {
        this.$emit('input', this.formatItem(item))
      }
      this.$emit('input', item)
      this.$emit('change', item)
    },
    formatItem (arr) {
      var result = ''

      arr.reduce((before, now, index) => {
        let val = before.filter((item) => {
          return item.value === now
        })

        result += '-' + val[0].label

        return val[0].children
      }, address)
      return result.substring(1)
    }
  }
}
</script>
